<template>
  <view class="page">
    <view class="goods-tab">
      <view class="tab">
        <text class="action">默认</text>
      </view>
      <view class="tab">
        <text>降价</text>
      </view>
      <view class="tab">
        <text>促销</text>
      </view>
      <view class="tab">
        <text>分类</text>
      </view>
      <view class="tab" @click="isEdit = !isEdit">
        <text>{{isEdit?'完成':'编辑'}}</text>
      </view>
    </view>
    <view class="goods-list">
      <view class="list" v-for="(item,index) in goodslist" :key="index">
        <view class="check" :style="isEdit?'display: flex':'display: none'">
          <text  @click="checked(item.id,index)"
            :class="!checkbuttonarr[index].checkbutton?'iconfont icon-check':'iconfont icon-checked'"></text>
        </view>
        <view class="thumb">
          <image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'" mode=""></image>
        </view>
        <view class="item">
          <view class="title">
            <text class="two-omit">{{item.goodName}}</text>
          </view>
          <view class="price-more">
            <view class="price">{{item.price}}元</view>
            <view class="depreciate" :style="!isEdit?'display: flex':'display: none'">
              <text v-if="lessprice[index]>0">比关注时降价{{lessprice[index]}}元</text>
            </view>
          </view>
          <view class="goods-btn">
            <view class="btn">
              <text>看相似</text>
              <text v-if="lessprice[index]>0">降价通知</text>
            </view>
            <view class="cart">
              <text class="iconfont icon-cart"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer-btn" :style="isEdit?'display: flex':'display: none'">
      <view @click="OnDeAttention()" class="btn">取消关注</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isEdit: false,
        goodslist:'',
        lessprice:[],
        idList:[],
        checkbuttonarr:[]
      };
    },
    onShow() {
      uni.request({
        data: {
          userId:this.$queue.getData("id")
        },
        method: 'POST',
        header: {
          "content-type": 'application/x-www-form-urlencoded'
        },
        url: "http://localhost:8089/cgoAdmin/getAttention",
        success: (res) => {
          this.goodslist=res.data.result;
          for(var i=0;i<this.goodslist.length;i++){
            this.lessprice[i]=this.goodslist[i].addprice-this.goodslist[i].price;
            var checked = {
              'checkbutton': false
            };
            
            this.checkbuttonarr.push(checked);
          }
          
          
        }
      })
    },
    methods:{
      checked: function(id, index) {
        if (!this.checkbuttonarr[index].checkbutton) {
          this.idList.push(id);
          this.checkbuttonarr[index].checkbutton = true;
          
          
        } else {
          this.idList.splice(this.idList.indexOf(id), 1);
          this.checkbuttonarr[index].checkbutton = false;
        }
      },OnDeAttention() {
        uni.request({
          url: 'http://localhost:8089/cgoAdmin/delAttention',
          data: {
            ids: this.idList
          },
          method: 'POST',
          header: {
            "content-type": 'application/x-www-form-urlencoded'
          },
          success: (res) => {
            if (res.data.success) {
              this.$queue.showToast("取关成功");
              setTimeout(function() {
                uni.redirectTo({
                  url: "/pages/GoodsOn/GoodsOn",
                })
              }, 1000)


            } else {
              if (res.data.message != null)
                this.$queue.showToast(res.data.message);
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import 'GoodsOn.scss';
</style>